<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>在线看配置数据</title>
	<style type="text/css">
		*{
			padding:0px;
			margin:0px;
		}
		table{
			width:100%;
			height:100%;
		}
 
		table td{
			text-align:center;
			border:solid 1px;
		}

	</style>
</head>
<body>
	<div id='dragDiv' style='height:50px;width:100%;background-color:#444444;color:#ffffff;'>
		把xml或json拖入到此
	</div>
	<table border="1" id="tb">
		<!-- <tr>
			<th>Month</th>
			<th>Savings</th>
		  </tr>
		  <tr>
			<td>January</td>
			<td>$100</td>
		  </tr> -->
	</table>
</body>
<script type="text/javascript" src="../libs/minicomps.min.js"></script>
<script type="text/javascript" src="../libs/Unify.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
 new mc.Button(document.body,0,25,'清空数据',(e)=>{location.reload();});
 var input=new mc.TextInput(document.body,110,25);
 new mc.Button(document.body,220,25,'确定',(e)=>{doData()});
	var dragDiv = document.getElementById('dragDiv');
	dragDiv.ondragover = function (e) {
		e.preventDefault();
	}
	dragDiv.ondrop = function (e) {
		e.preventDefault();
		files=e.dataTransfer.files;
		loadData(files)
	}
	function loadData(files){
		for(var i=0;i<files.length;i++){
			var file=files[i];
			var reader = new FileReader();
			reader.onload = function() {  
				//console.log(this.result);
				var array=[];
				try{
					var json=JSON.parse(this.result);
					console.log(json)
					array=Unify.objectToArray(json);
				}catch(e){
					var xml=Unify.stringToXml(this.result)
					//console.log(xml)
					//console.log(Unify.xmlToJson(xml))
					var data=Unify.xmlToJson(xml);
					array=data.RECORDS.RECORD;
				}
				console.log(array);
				draw(array)
			}
			reader.readAsText(file);
		}
	}

	function draw(array){
			var html = '<tr>';
			var t=111
			var first=array[0]
			for(let k in first){
				html += '<th>'+k+'</th>'
			}
			html +='</tr>';
			array.forEach(da => {
				//console.log(da);
				html +='<tr>';
				for(let k in da){
					let a=da[k]['#text']||da[k]
					html += '<th>'+a+'</th>'
				}
				html +='</tr>';
			});				
			$('#tb').append(html);
		}
	function doData(){
		try{
			let str=input.text;
			//console.log(str)
			str.replace(/\//g,"");
			//console.log(str)
			var json=JSON.parse(str);
			//console.log(json)
			array=Unify.objectToArray(json);
			draw(array)
			//console.log(array)
		}catch(e){
			alert('数据不是JSON格式')
		}
	}
</script>
</html>